'use strict';

/*module.exports=function(){
  var element=document.createElement('h1');
    element.innerHTML='Hello world';
  console.log("zhe ");
    return element;
};*/
import React from 'react';
import ReactDOM from 'react-dom';
import './css/test.css';
import { Router, Route, Link } from 'react-router'
/*
export default class Hello extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}*/

/*require('react');
var ReactDOM=require('react-dom');
require('./css/test.css');*/
var CommentList = React.createClass({
    render: function() {
        return (
            <div className="commentList">
                Hello, world! I am a CommentList.
            </div>
        );
    }
});

var CommentForm = React.createClass({
    render: function() {
        return (
            <div className="commentForm">
                Hello, world! I am a CommentForm.
            </div>
        );
    }
});
var CommentBox = React.createClass({
    render: function() {
        return (
            <div className="commentBox">
                <h1>Comments</h1>
                <CommentForm/>
                <CommentList/>
            </div>
        );
    }
});


////////////////////////////////////////////////
var Comment = React.createClass({
    render: function() {
        return (
            <div className="comment">
                <h2 className="commentAuthor">
                    {this.props.author}
                </h2>
                {this.props.children}
            </div>
        );
    }
});
var CommentList = React.createClass({
    render: function() {
        return (
            <div className="commentList">
                <Comment author="Pete Hunt">This is one comment</Comment>
                <Comment author="Jordan Walke">This is *another* comment</Comment>
            </div>
        );
    }
});
ReactDOM.render(
    <CommentList/>,
    document.getElementById('content')
);